<template>
  <div class="deepseek-chat-container">
    <div class="image-anomaly">
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">< 返回首页</el-button>
        <el-button type="primary" @click="switchAnomalyDetect">{{ switchTitle }}</el-button>
        <el-button type="success" >2024年烟叶数据</el-button>
          <!-- 烟叶评估下拉框：选项为“remark（编码）”，值为“id” -->
          <el-select
            v-model="selectedEvaluationId"
            placeholder="请选择2024年烟叶评估编码"
            clearable
            style="width: 300px;"
            @change="handleSelectChange"
            @clear="handleSelectClear"
          >
            <!-- 下拉选项：label显示remark（编码），value绑定id -->
            <el-option
              v-for="(item, index) in evaluationOptions"
              :key="index + item.id"
              :label="item.evaluationCode"
              :value="item.id"
            ></el-option>
          </el-select>
      </div>

      <!--    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">-->

      <!--      <el-form-item label="图像统一化处理" prop="remark" label-width="150">-->
      <!--        <el-select v-model="queryParams.remark" placeholder="请选择图像统一化处理" clearable>-->
      <!--          <el-option-->
      <!--            v-for="dict in dict.type.sys_image_unify_process"-->
      <!--            :key="dict.value"-->
      <!--            :label="dict.label"-->
      <!--            :value="dict.value"-->
      <!--          />-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item>-->
      <!--        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>-->
      <!--        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>-->
      <!--      </el-form-item>-->
      <!--    </el-form>-->
    </div>
    <!--    <el-container class="full-height">-->
    <!--      &lt;!&ndash; 侧边栏 &ndash;&gt;-->
    <!--      <el-aside width="220px" class="sidebar">-->
    <!--        <div class="logo-area">-->
    <!--          <img src="@/assets/logo/logo.png" alt="Knowledge Logo" class="logo">-->
    <!--          <span class="logo-text">品质分析</span>-->
    <!--        </div>-->

    <!--        <el-menu-->
    <!--        default-active="chat"-->
    <!--        class="side-menu"-->
    <!--        background-color="#202123"-->
    <!--        text-color="#fff"-->
    <!--        active-text-color="#10a37f">-->
    <!--        <el-menu-item index="chat">-->
    <!--          <i class="el-icon-chat-dot-round"></i>-->
    <!--          <span slot="title">历史聊天</span>-->
    <!--        </el-menu-item>-->
    <!--        &lt;!&ndash;          <el-menu-item index="history">&ndash;&gt;-->
    <!--        &lt;!&ndash;            <i class="el-icon-time"></i>&ndash;&gt;-->
    <!--        &lt;!&ndash;            <span slot="title">历史记录</span>&ndash;&gt;-->
    <!--        &lt;!&ndash;          </el-menu-item>&ndash;&gt;-->
    <!--                  <el-menu-item index="settings"  @click="handleUploadClick">-->
    <!--                    <i class="el-icon-setting"></i>-->

    <!--                    <span slot="title">品质分析</span>-->
    <!--                  </el-menu-item>-->
    <!--      </el-menu>-->

    <!--        <div class="user-info">-->
    <!--          <el-avatar :size="32" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>-->
    <!--          <span class="username">{{ aiUser}}</span>-->
    <!--&lt;!&ndash;          <span class="username">"store.getters.name"</span>&ndash;&gt;-->
    <!--        </div>-->
    <!--      </el-aside>-->

    <!--      &lt;!&ndash; 主内容区 &ndash;&gt;-->
    <!--      <el-container>-->
    <!--        <el-header class="chat-header">-->
    <!--          <div class="header-actions">-->
    <!--            <el-button type="text" icon="el-icon-back" @click="goback()">返回上一页</el-button>-->
    <!--            &lt;!&ndash;            <el-button type="text" icon="el-icon-share"></el-button>&ndash;&gt;-->
    <!--          </div>-->
    <!--          <h2>{{ topTitle }}</h2>-->
    <!--&lt;!&ndash;          <h2>{{ 内容由烟叶知识库AI 生成，请仔细甄别 }}</h2>&ndash;&gt;-->

    <!--        </el-header>-->

    <!--        <el-main class="chat-main">-->
    <!--          <div class="chat-content">-->
    <!--            &lt;!&ndash; 消息列表 &ndash;&gt;-->
    <!--            <div-->
    <!--              v-for="(message, index) in messages"-->
    <!--              :key="index"-->
    <!--              class="message-item"-->
    <!--              :class="{'user-message': message.role === 'user', 'assistant-message': message.role === 'assistant'}">-->

    <!--              <div class="message-avatar">-->
    <!--                <el-avatar-->
    <!--                  :size="32"-->
    <!--                  :src="message.role === 'user'-->
    <!--                    ? 'http://localhost/static/img/logo.42f388ca.png'-->
    <!--                    : 'https://deepseek.com/ai-avatar.png'">-->
    <!--                  {{ message.role === 'user' ? '我' : 'AI' }}-->
    <!--                </el-avatar>-->
    <!--              </div>-->

    <!--              <div class="message-content">-->
    <!--                <div class="message-text" v-html="getMarkdownContent(message.content)"></div>-->
    <!--                <div class="message-time">{{ message.time }}</div>-->
    <!--              </div>-->
    <!--            </div>-->
    <!--          </div>-->
    <!--        </el-main>-->

    <!--        <el-footer class="chat-footer">-->
    <!--          <div class="input-area">-->
    <!--            <el-input-->
    <!--              type="textarea"-->
    <!--              :rows="1"-->
    <!--              resize="none"-->
    <!--              placeholder="输入消息..."-->
    <!--              v-model="inputMessage"-->
    <!--              @keyup.enter.native="sendMessage">-->
    <!--            </el-input>-->
    <!--            <div class="input-actions">-->
    <!--              <el-button-->
    <!--                size="small"-->
    <!--                type="primary"-->
    <!--                :disabled="!inputMessage"-->
    <!--                @click="sendMessage"-->
    <!--                class="send-btn">-->
    <!--                发送-->
    <!--              </el-button>-->
    <!--              <el-button-->
    <!--                type="text"-->
    <!--                icon="el-icon-upload"-->
    <!--                @click="handleUploadClick"-->
    <!--                title="上传烟叶元素数据">-->
    <!--              </el-button>-->
    <!--            </div>-->
    <!--          </div>-->
    <!--          <div class="footer-tips">-->
    <!--            <span>{{ topTitle }}</span>-->
    <!--          </div>-->
    <!--        </el-footer>-->

    <!--      </el-container>-->
    <!--    </el-container>-->

    <!-- 添加或修改设备表示对话框 -->
    <!--    <el-dialog :title="title" :visible.sync="openInput" width="500px" append-to-body>-->
    <!--      <el-form ref="form" :model="form" :rules="rules"  label-width="100px">-->
    <!--        <el-form-item label="氮" prop="nitrogenEstimate" >-->
    <!--          <el-input v-model="form.nitrogenEstimate" placeholder="请输入烟叶对应的氮的值，单位mg/kg " />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="磷" prop="phosphorusEstimate">-->
    <!--          <el-input v-model="form.phosphorusEstimate" placeholder="请输入烟叶对应的磷的值，单位mg/kg " />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="钾" prop="potassiumEstimate">-->
    <!--          <el-input v-model="form.potassiumEstimate" placeholder="请输入烟叶对应的钾的值，单位mg/kg " />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="烟叶图片 " prop="tobaccoImgUrl">-->
    <!--          <imageUpload v-model="form.tobaccoImgUrl"/>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="其他补充数据" prop="remark">-->
    <!--          <el-input type="textarea" v-model="form.remark" placeholder="请输入烟叶其他营养成分数据，如光照强度等 " />-->
    <!--        </el-form-item>-->
    <!--      </el-form>-->
    <!--      <div slot="footer" class="dialog-footer">-->
    <!--        <el-button type="primary" @click="submitForm">开始分析</el-button>-->
    <!--        <el-button @click="cancel">取 消</el-button>-->
    <!--      </div>-->
    <!--    </el-dialog>-->

    <!--&lt;!&ndash;中间进度条&ndash;&gt;-->
    <!--    &lt;!&ndash; 中间进度条 &ndash;&gt;-->
    <!--    <div v-if="showProgress" class="progress-container">-->
    <!--      <div class="progress-content">-->
    <!--        <el-progress-->
    <!--          :percentage="progressPercent"-->
    <!--          stroke-width="8"-->
    <!--          style="margin-bottom: 15px;"-->
    <!--        ></el-progress>-->
    <!--        <p style="text-align: center; color: #666;">正在分析数据，请稍候...</p>-->
    <!--      </div>-->
    <!--    </div>-->

    <!--&lt;!&ndash;    右侧 的对话框&ndash;&gt;-->
    <!--    &lt;!&ndash; 右侧结果对话框 &ndash;&gt;-->
    <!--    <el-dialog-->
    <!--      title="分析结果"-->
    <!--      :visible.sync="openResult"-->
    <!--      width="450px"-->
    <!--      append-to-body-->
    <!--      :style="{ right: '5%' }"-->
    <!--    >-->
    <!--      <el-form ref="resultForm" label-width="100px">-->
    <!--        <el-form-item label="分析结论">-->
    <!--          <el-input-->
    <!--            type="textarea"-->
    <!--            v-model="analysisResult"-->
    <!--            :rows="10"-->
    <!--            readonly-->
    <!--            placeholder="分析结果将显示在这里..."-->
    <!--          ></el-input>-->
    <!--        </el-form-item>-->
    <!--      </el-form>-->
    <!--      <div slot="footer" class="dialog-footer">-->
    <!--        <el-button @click="openResult = false">关闭</el-button>-->
    <!--      </div>-->
    <!--    </el-dialog>-->


    <!-- 关键：用 Flex 容器包裹三个元素，确保横向排列 -->
    <!-- 1. Flex 容器：必须确保无额外 padding/margin 干扰 -->
    <div class="dialog-container">

      <el-dialog
        :title="title"
        :visible.sync="openInput"
        width="850px"
        :append-to-body="false"
        :modal="false"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :show-close="false"
        class="left-dialog"
      >

        <el-card v-if="isVisbileCard" class="box-card">
          <div slot="header" class="clearfix">
            <span>{{ cardTitle }}</span>
          </div>
          <!-- 循环 cardList 渲染列表，每个项显示“显示名称：数据值” -->
          <div v-for="(item, index) in cardList" :key="index" class="text item">
            <span class="label">{{ item.label }}：</span>
            <span class="value">{{ item.value }}</span>
          </div>
          <!-- 若列表为空（如刚进入页面未选择时），显示提示 -->
          <div v-if="cardList.length === 0" class="text item empty-tip">
            请选择2024年的烟叶评估记录查看详情
          </div>
        </el-card>
        <!-- 表单使用栅格布局，每行两列 -->
        <el-form v-if="isVisibleInput || isVisibleImage" ref="form" :model="form" :rules="rules" label-width="120px">
          <el-row :gutter="5"> <!-- gutter 控制列间距 -->
            <!-- 第一行：氮 + 磷 -->
            <el-col :span="12" v-if="isVisibleInput"> <!-- 占12格（24格系统，12=50%宽度） -->
              <el-form-item label="氮(%)" prop="nitrogenEstimate">
                <el-input v-model="form.nitrogenEstimate" placeholder="单位：%"/>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="isVisibleInput">
              <el-form-item label="磷(%)" prop="phosphorusEstimate">
                <el-input v-model="form.phosphorusEstimate" placeholder="单位：%"/>
              </el-form-item>
            </el-col>

            <!-- 第二行：钾 + 钙 -->
            <el-col :span="12" v-if="isVisibleInput">
              <el-form-item label="钾(%)" prop="potassiumEstimate">
                <el-input v-model="form.potassiumEstimate" placeholder="单位：%"/>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="isVisibleInput">
              <el-form-item label="钙(%)" prop="calciumEstimate">
                <el-input v-model="form.calciumEstimate" placeholder="单位：%"/>
              </el-form-item>
            </el-col>

            <!-- 第三行：镁 + 土壤pH值 -->
            <el-col :span="12" v-if="isVisibleInput">
              <el-form-item label="镁(%)" prop="magnesiumEstimate">
                <el-input v-model="form.magnesiumEstimate" placeholder="单位：%"/>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="isVisibleInput">
              <el-form-item label="土壤pH值" prop="soilPh">
                <el-input v-model="form.soilPh" placeholder="范围：1-14"/>
              </el-form-item>
            </el-col>

            <!-- 第四行：种植年份 + 种植基地 -->
            <el-col :span="12" v-if="isVisibleInput">
              <el-form-item label="种植年份" prop="plantingYear">
                <el-input v-model="form.plantingYear" placeholder="如：2025"/>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="isVisibleInput">
              <el-form-item label="种植基地" prop="plantingBase">
                <el-input v-model="form.plantingBase" placeholder="如：贺州富阳基地"/>
              </el-form-item>
            </el-col>

            <!-- 第五行：日均光照时长 + 年降雨量 -->
            <!--            <el-col :span="12">-->
            <!--              <el-form-item label="日均光照时长" prop="lightDuration">-->
            <!--                <el-input v-model="form.lightDuration" placeholder="单位：小时/天"/>-->
            <!--              </el-form-item>-->
            <!--            </el-col>-->
            <!--            <el-col :span="12">-->
            <!--              <el-form-item label="年降雨量" prop="annualRainfall">-->
            <!--                <el-input v-model="form.annualRainfall" placeholder="单位：毫米"/>-->
            <!--              </el-form-item>-->
            <!--            </el-col>-->

            <!-- 第六行：生长期天数 + 平均生长温度 -->
            <!--            <el-col :span="12">-->
            <!--              <el-form-item label="生长期" prop="growthDays">-->
            <!--                <el-input v-model="form.growthDays" placeholder="如：120天"/>-->
            <!--              </el-form-item>-->
            <!--            </el-col>-->
            <!-- 第七行：采收季节（单独一行，选择器宽度适配） -->
            <el-col :span="12" v-if="isVisibleInput">
              <el-form-item label="烟叶部位" prop="harvestSeason">
                <el-select v-model="form.harvestSeason" placeholder="请选择">
                  <el-option label="下部叶" value="spring"></el-option>
                  <el-option label="中部叶" value="summer"></el-option>
                  <el-option label="上部叶" value="autumn"></el-option>
                  <!--                  <el-option label="冬季" value="winter"></el-option>-->
                </el-select>
              </el-form-item>
            </el-col>

            <!--              <el-col :span="12" v-if="isVisibleInput">-->
            <!--                <el-form-item label="平均生长温度" prop="averageTemperature">-->
            <!--                  <el-input v-model="form.averageTemperature" placeholder="平均生长温度，单位：℃"/>-->
            <!--                </el-form-item>-->
            <!--              </el-col>-->


            <!--            <el-col :span="12">-->
            <!--              <el-form-item label="备注" prop="remark">-->
            <!--                <el-input v-model="form.remark" placeholder="请输入其他信息，如该批次为上部烟"/>-->
            <!--              </el-form-item>-->
            <!--            </el-col>-->

            <!-- 第八行：烟叶图片（单独一行，占满整行） -->
            <el-col :span="24" v-if="isVisibleImage || isVisibleInput"> <!-- 占24格=100%宽度 -->
              <el-form-item label="烟叶图片" prop="tobaccoImgUrl">
                <imageUpload v-model="form.tobaccoImgUrl"/>
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>
        <div v-if="isVisibleInput" slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">开始分析</el-button>
        </div>
        <!--        只允许图片的时候，输入框关闭-->
        <div v-if="isVisibleImage && !isVisibleInput" slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitYanyeAnomaly">开始识别缺陷元素</el-button>
        </div>
        <div v-if="isVisbileCard" slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitTestData">开始分析</el-button>
        </div>
      </el-dialog>

      <!-- 中间进度条：仅分析时显示 -->
      <div v-if="showProgress" class="progress-container">
        <!--      <div  class="progress-container">-->
        <div class="progress-content">
          <el-progress :percentage="progressPercent" stroke-width="15" style="margin-bottom: 15px;"/>
          <p style="text-align: center; color: #666;">正在分析数据<br>请稍候...</p>
        </div>
      </div>

      <!-- 右侧结果对话框：同左侧，强制 Flex 右项样式 -->
      <el-dialog
        title="分析结果"
        :visible.sync="openResult"
        width="700px"
        :append-to-body="false"
        :modal="false"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :show-close="false"
        class="right-dialog"
      >
        <!-- 结果内容不变 -->
        <el-form ref="resultForm" label-width="100px">
          <el-form-item label="分析结论">
            <el-input
              type="textarea"
              v-model="analysisResult"
              :rows="25"
              readonly
              placeholder="请先在左边输入所需土壤营养物质，分析结果将显示在这里..."
            />
          </el-form-item>
        </el-form>
        <!--        <div slot="footer" class="dialog-footer">-->
        <!--          <el-button @click="openResult = false">关闭</el-button>-->
        <!--        </div>-->
      </el-dialog>
    </div>
  </div>
</template>

<script>
import store from "@/store";
import {marked} from 'marked';

import {getToken} from "@/utils/auth";

import {getBaiduAIMessage, getQianFanAIMessage, getQualityAIMessage, getYanyeElement,} from "@/api/ai/ai";
import {getTobaccoIdAndCode} from "@/api/evaluation/evaluation";
import { listComposition, getComposition, delComposition, addComposition, updateComposition } from "@/api/composition/composition";
export default {
  name: 'DeepLeaf knowledge',
  data() {
    return {
      analysis2024Data:null,//2024的测试数据
      cardList: [],  // 用于存储卡片列表的“显示名称-数据值”映射
      cardTitle:'',//卡片标题名称
      isVisbileCard: false,//是否展开卡片
      selectedEvaluationId: '',  // 选中的烟叶评估id（用于表单提交等）
      evaluationOptions: [],     // 下拉框选项列表（存储id和remark）
      topTitle: '',
      title: '烟叶品质分析数据',
      baseUrl: "http://43.139.22.97:5173",
      form: {
        nitrogenEstimate: '',
        phosphorusEstimate: '',
        potassiumEstimate: '',
        tobaccoImgUrl: '',
        remark: '',
        plantingYear: "",
        plantingBase: "",
        lightDuration: "",
        annualRainfall: "",
        calciumEstimate: "",
        magnesiumEstimate: "",
        soilPh: "",
        growthDays: "",
        averageTemperature: "",
        harvestSeason: "",
        prompt: ""

      },
      openInput: false,       // 左侧输入对话框显示状态
      isVisibleInput: true,//所有单行输入框的数据
      isVisibleImage: true,//所有烟叶图片的数据
      switchStatus: false,//是否已经是只有图片状态，false代表是原状态，也就是有文本输入的状态
      switchTitle: '识别烟叶缺陷元素',

      openResult: true,      // 右侧结果对话框显示状态
      showProgress: false,    // 进度条显示状态
      progressPercent: 0,     // 进度百分比
      progressTimer: null,    // 进度条定时器
      analysisResult: '',     // 分析结果
      uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken()
      },
      aiUser: store.getters.name,
      queryParams: {
        speaker: '',
        sendText: '',
        robotText: ''
      },
      inputMessage: '',
      messages: [
        // {
        //   role: 'assistant',
        //   // content: '你好！作为一个烟叶智能体，我的主要任务是识别烟叶的品质能力。我可以通过分析和评估烟叶的外观、气味、化学成分以及加工过程等方面的特征，来准确判断烟叶的品质。这有助于确保烟叶在后续加工过程中的稳定性和最终烟草产品的口感质量。同时，我也能够提供一些关于烟叶种植、采收、储存等方面的建议，以帮助提高烟叶的品质。\n',
        //   content: '',
        //   time: this.getCurrentTime()
        // },
        // {
        //   role: 'user',
        //   content: '',
        //   time: '10:32'
        // },
        // {
        //   role: 'assistant',
        //   content: ''
        //   ,
        //   time: '10:33'
        // }
      ],
      rules: {
        nitrogenEstimate: [
          {required: true, message: "氮的值不能为空，单位mg/kg", trigger: "blur"}
        ],
        phosphorusEstimate: [
          {required: true, message: "磷的值不能为空，单位mg/kg", trigger: "blur"}
        ],
        potassiumEstimate: [
          {required: true, message: "钾的值不能为空，单位mg/kg", trigger: "blur"}
        ],
        plantingYear: [
          {required: true, message: "钾的值不能为空，单位mg/kg", trigger: "blur"}
        ],
        plantingBase: [
          {required: true, message: "种植基地不能为空，如：贺州富阳基地", trigger: "blur"}
        ],
        lightDuration: [
          {required: true, message: "日均光照时长的值不能为空，单位：天", trigger: "blur"}
        ],
        annualRainfall: [
          {required: true, message: "年降雨量的值不能为空，单位：毫米", trigger: "blur"}
        ],
        calciumEstimate: [
          {required: true, message: "钙的值不能为空，单位mg/kg", trigger: "blur"}
        ],
        magnesiumEstimate: [
          {required: true, message: "镁的值不能为空，单位mg/kg", trigger: "blur"}
        ],
        soilPh: [
          {required: true, message: "PH的值不能为空，取值范围：1-14", trigger: "blur"}
        ],
        growthDays: [
          {required: true, message: "生长期天数的值不能为空，单位：天", trigger: "blur"}
        ],
        averageTemperature: [
          {required: true, message: "平均生长温度的值不能为空，单位：°C", trigger: "blur"}
        ],
        harvestSeason: [
          {required: true, message: "采收季节不能为空", trigger: "blur"}
        ],
        tobaccoImgUrl: [
          {required: true, message: "烟叶图片不能为空", trigger: "blur"}
        ],
      }

    }
  },
  methods: {
    //处理上传按钮
    handleUploadClick() {
      this.openInput = true
    },

    // 上传前校检格式和大小
    handleBeforeUpload(file) {
      const type = ["image/jpeg", "image/jpg", "image/png", "image/svg"];
      const isJPG = type.includes(file.type);
      // 检验文件格式
      if (!isJPG) {
        this.$message.error(`图片格式错误!`);
        return false;
      }
      // 校检文件大小
      if (this.fileSize) {
        const isLt = file.size / 1024 / 1024 < this.fileSize;
        if (!isLt) {
          this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
          return false;
        }
      }
      return true;
    },
    handleUploadSuccess(res, file) {
      // 如果上传成功
      if (res.code == 200) {
        // 获取富文本组件实例
        let quill = this.Quill;
        // 获取光标所在位置
        let length = quill.getSelection().index;
        // 插入图片  res.url为服务器返回的图片地址
        quill.insertEmbed(length, "image", process.env.VUE_APP_BASE_API + res.fileName);
        // 调整光标到最后
        quill.setSelection(length + 1);
      } else {
        this.$message.error("图片插入失败");
      }
    },
    handleUploadError() {
      this.$message.error("图片插入失败");
    },
    //识别品质分析数据
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          console.log("this.form", this.form);
          this.showProgress = true;
          this.startProgress();

          // 1. 定义字段辅助映射：处理单位、采收季节中英文转换
          const seasonMap = {spring: "下部叶", summer: "中部叶", autumn: "上部叶"}; // 季节映射
          const fieldText = []; // 存储每个字段的文本片段

          // 2. 按「元素→土壤→种植信息→环境→季节→图片」逻辑拼接字段
          // 元素类（带mg/kg单位）
          fieldText.push(`氮${this.form.nitrogenEstimate}mg/kg`);
          fieldText.push(`磷${this.form.phosphorusEstimate}mg/kg`);
          fieldText.push(`钾${this.form.potassiumEstimate}mg/kg`);
          fieldText.push(`钙${this.form.calciumEstimate}mg/kg`);
          fieldText.push(`镁${this.form.magnesiumEstimate}mg/kg`);
          // 土壤相关
          fieldText.push(`土壤pH值${this.form.soilPh}`);
          // 种植基础信息
          fieldText.push(`种植年份${this.form.plantingYear}`);
          fieldText.push(`种植基地${this.form.plantingBase}`);
          // 环境条件
          // fieldText.push(`日均光照时长${this.form.lightDuration}小时/天`);
          // fieldText.push(`年降雨量${this.form.annualRainfall}毫米`);
          // fieldText.push(`平均生长温度${this.form.averageTemperature}℃`);
          // 生长期与季节（季节转中文）
          // fieldText.push(`生长期天数${this.form.growthDays}`);
          fieldText.push(`烟叶部位${seasonMap[this.form.harvestSeason]}`);

          // 3. 整合所有字段为一句话prompt
          const prompt = fieldText.join("、");
          // 补充备注（原有逻辑保留）
          const remarkAllText = this.form.remark ? "，额外补充信息：" + this.form.remark : "";
          console.log("prompt")
          console.log(prompt)
          // 氮50mg/kg、磷50mg/kg、钾10mg/kg、钙10mg/kg、镁10mg/kg、土壤pH值10、种植年份2024、种植基地贺州、日均光照时长30小时/天、年降雨量600毫米、平均生长温度37℃、生长期天数100、采收季节秋季
          this.form.prompt = prompt
          // 4. 推送用户消息（文本格式，包含所有字段+图片）
          this.messages.push({
            role: "user",
            content: `请帮我分析以下烟叶相关数据的品质关联信息：${prompt}，烟叶图片为'${this.form.tobaccoImgUrl}'${remarkAllText}`,
            time: this.getCurrentTime()
          });
          // this.openLoading();
          this.form.flag = '1'
          this.analysisResult = ''
          getQualityAIMessage(this.form).then(response => {
            // 分析完成后更新进度到100%
            this.progressPercent = 100;
            // this.showProgress = false;
            // this.analysisResult = response.msg;
            // this.openResult = true; // 显示结果对话框
            // // 延迟关闭进度条，确保用户看到完成状态
            setTimeout(() => {
              this.showProgress = false;
              this.analysisResult = response.msg;
              this.openResult = true; // 显示结果对话框
            }, 500);

            this.messages.push({
              role: 'assistant',
              content: response.msg,
              time: this.getCurrentTime(),
            });

            // this.reset();
          }).catch(error => {
            // 处理错误情况
            this.showProgress = false;
            this.$message.error("分析失败，请重试");
            console.error(error);
          });

        }
      });
    },

    // 启动进度条
    startProgress() {
      // 清除可能存在的旧定时器
      if (this.progressTimer) {
        clearInterval(this.progressTimer);
      }

      // 每50ms更新一次进度
      this.progressTimer = setInterval(() => {
        this.progressPercent += 1;

        // 防止进度超过100%
        if (this.progressPercent >= 100) {
          this.progressPercent = 100;
        }
      }, 100);
    },

    cancel() {
      this.openInput = false;
      // this.$router.back()
      this.$router.push({
        path: "/index",
      }).catch(() => {
      });
      this.reset();
    },
    reset() {
      this.form = {
        nitrogenEstimate: null,
        phosphorusEstimate: null,
        tobaccoImgUrl: null,
        potassiumEstimate: null,
      };
      this.resetForm("form");
    },
    resetForm(formName) {
      if (this.$refs[formName]) {
        this.$refs[formName].resetFields();
      }
    },
    getMarkdownContent(content) {
      return marked.parse(content);
    },
    sendMessage() {
      if (!this.inputMessage.trim()) return;
      this.queryParams.sendText = this.inputMessage
      // 添加用户消息
      this.messages.push({
        role: 'user',
        content: this.inputMessage,
        time: this.getCurrentTime()
      });

      //加载圈圈
      this.openLoading();
      getBaiduAIMessage(this.queryParams).then(response => {
        this.$modal.closeLoading();
        this.messages.push({
          role: 'assistant',
          content: response.msg,
          time: this.getCurrentTime()
        });
      });


      // 滚动到底部
      this.$nextTick(() => {
        this.scrollToBottom();
      });
      //
      // // 模拟AI回复
      // setTimeout(() => {
      //   getBaiduAIMessage(this.queryParams).then(response => {
      //     console.log("response")
      //     console.log(response)
      //     this.messages.push({
      //       role: 'assistant',
      //       content: response.msg,
      //       time: this.getCurrentTime()
      //     });
      //   });
      //
      //
      //   // 滚动到底部
      //   this.$nextTick(() => {
      //     this.scrollToBottom();
      //   });
      // }, 800);

      this.inputMessage = '';
    },
    getCurrentTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = (now.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，所以需要加1
      const day = now.getDate().toString().padStart(2, '0');
      const hours = now.getHours();
      const minutes = now.getMinutes().toString().padStart(2, '0');

      return `${year}-${month}-${day} ${hours}:${minutes}`;
    },
    scrollToBottom() {
      const container = this.$el.querySelector('.chat-content');
      container.scrollTop = container.scrollHeight;
    },
    // 打开加载层
    openLoading() {
      this.$modal.loading("关联模型正在分析数据，请稍候！");
    },

    //   返回首页
    goback() {
      // this.$router.push('/business/model').catch(() => {
      // });

      this.$router.push({
        path: "/index",
      }).catch(() => {
      });
    },
    //识别缺陷元素
    switchAnomalyDetect() {
      this.selectedEvaluationId=''
      if (this.switchStatus) {//如果已经是图片缺陷检测
        this.isVisibleInput = true
        this.isVisibleImage = false
        this.isVisbileCard = false
        this.switchStatus = false
        this.switchTitle = '识别烟叶缺陷元素'
      } else {//如果是文本框输入的时候
        this.isVisibleInput = false
        this.isVisibleImage = true
        this.isVisbileCard = false
        this.switchStatus = true
        this.switchTitle = '分析土壤与烟叶品质关系'
      }
    },
    //识别图片缺陷元素
    submitYanyeAnomaly() {
      let data = {
        "fileUrl": this.form.tobaccoImgUrl
      }
      this.showProgress = true;
      this.startProgress();
      this.analysisResult = ''
      getYanyeElement(data).then(response => {
        // 分析完成后更新进度到100%
        this.progressPercent = 100;
        // this.showProgress = false;
        // this.analysisResult = response.msg;
        // this.openResult = true; // 显示结果对话框
        // // 延迟关闭进度条，确保用户看到完成状态
        setTimeout(() => {
          this.showProgress = false;
          this.analysisResult = response.aiReturnText;
          this.openResult = true; // 显示结果对话框
        }, 500);

        this.messages.push({
          role: 'assistant',
          content: response.aiReturnText,
          time: this.getCurrentTime(),
        });
      })
    },

    //测试数据
    submitTestData() {
      let data = {
        "prompt": this.analysis2024Data,
        "flag": 1
      }
      this.showProgress = true;
      this.startProgress();
      getQualityAIMessage(data).then(response => {
        // 分析完成后更新进度到100%
        console.log("response")
        console.log(response)
        this.progressPercent = 100;
        // this.showProgress = false;
        // this.analysisResult = response.msg;
        // this.openResult = true; // 显示结果对话框
        // // 延迟关闭进度条，确保用户看到完成状态
        setTimeout(() => {
          this.showProgress = false;
          this.analysisResult = response.msg;
          this.openResult = true; // 显示结果对话框
        }, 500);

        this.messages.push({
          role: 'assistant',
          content: response.aiReturnText,
          time: this.getCurrentTime(),
        });
      })
    },
    //下拉框数据
    // 加载后端接口数据，填充下拉框选项
    async loadEvaluationOptions() {
     await getTobaccoIdAndCode().then(response => {
        // 假设后端返回格式为：{code: 200, msg: "success", data: [...]}
        if (response.code === 200 && response.data) {
          // 将后端返回的“id”和“evaluationCode（即remark）”赋值给选项列表
          this.evaluationOptions = response.data;
        } else {
          this.$message.error('加载烟叶评估列表失败，请重试');
        }
      })

    },
    // 下拉框选中变化时的回调（可选，根据业务需求处理）
    handleSelectChange(selectedId) {
      if (selectedId) {
        this.isVisbileCard = true
        console.log('当前选中的烟叶评估id：', selectedId);
        this.isVisibleInput = false;
        this.isVisibleImage = false;
        const _this = this;
        // 获取当前id的数据
        getComposition(selectedId).then(response => {
          let res = response.data;
          //要分析的测试数据
          _this.analysis2024Data = JSON.stringify(res);
          // 1. 设置卡片标题（保持原有逻辑）
          _this.cardTitle = "编号："+`${res.redChemicalSampleCode}`+" 名称："+`${res.redChemicalSampleName}`;

          // 2. 组装卡片列表数据：按业务逻辑整理关键字段，格式为 {label: "显示名称", value: "数据值（带单位）"}
          _this.cardList = [
            { label: "样品编号", value: res.redChemicalSampleCode || "无" },
            { label: "样品名称", value: res.redChemicalSampleName || "无" },
            { label: "等级", value: res.redChemicalGrade || "无" },
            { label: "产地", value: res.redChemicalOrigin || "无" },
            { label: "年份", value: res.redChemicalYear || "无" },
            { label: "品种", value: res.redChemicalVariety || "无" },
            { label: "形态", value: res.redChemicalShape || "无" },
            { label: "类型", value: res.redChemicalType || "无" },
            { label: "样品说明", value: res.redChemicalSampleDesc || "无" },
            { label: "检测机构", value: res.remark || "无" },
            { label: "创建人", value: res.createBy || "无" },
            { label: "创建时间", value: res.createTime || "无" },
            // 3. 核心化学指标（带单位，按实际业务优先级排序）
            { label: "总植物碱", value: `${res.redChemicalTotalAlkaloidsPct || 0}%` },
            { label: "还原糖", value: `${res.redChemicalReducingSugarPct || 0}%` },
            { label: "总糖", value: `${res.redChemicalTotalSugarPct || 0}%` },
            { label: "总氮", value: `${res.redChemicalTotalNitrogenPct || 0}%` },
            { label: "钾含量", value: `${res.redChemicalPotassiumPct || 0}%` },
            { label: "氯含量", value: `${res.redChemicalChlorinePct || 0}%` },
            { label: "pH值", value: res.redChemicalPh || 0 },
            { label: "淀粉", value: `${res.redChemicalStarchPct || 0}%` },
            { label: "茄尼醇", value: `${res.redChemicalSolanesolMgG || 0}mg/g` },
            { label: "新植二烯", value: `${res.redChemicalNeophytadieneMgG || 0}mg/g` },
            { label: "绿原酸", value: `${res.redChemicalChlorogenicAcidMgG || 0}mg/g` }
          ];
        });
      } else {
        this.isVisbileCard =false
        // 未选择时重置：清空列表+显示输入框（保持原有逻辑）
        this.isVisibleInput = true;
        this.isVisibleImage = false;
        this.cardTitle = "";  // 清空标题
        this.cardList = [];   // 清空列表
      }
    },
    // 清空所有选项
    handleSelectClear(){
      // 专门处理清空按钮的逻辑
      console.log('点击了清空按钮');
      // 例如：重置卡片数据、显示输入框等
      this.cardTitle = '';
      this.cardList = [];
      this.isVisibleInput = true;
    }
  },



  created() {
    // 组件创建时，加载下拉框数据
    this.loadEvaluationOptions();
  },

  mounted() {
    // 接收参数
    const modelName = this.$route.query.name;
    console.log("接收到的参数：", modelName); // 输出：随机森林
    if (modelName != undefined || modelName != null) {
      this.openInput = true
      this.topTitle = "当前使用的关联分析模型：" + modelName
      this.title = "当前使用的关联分析模型：" + modelName

    }


    // 内容由烟叶知识库AI 生成，请仔细甄别
    // document.title = "关联分析模型"
    this.scrollToBottom();
  },
  // 组件销毁时清除定时器
  beforeDestroy() {
    if (this.progressTimer) {
      clearInterval(this.progressTimer);
    }
  }
}
</script>

<style scoped>
.deepseek-chat-container {
  height: 100vh; /* 占满屏幕高度，避免布局塌陷 */
  background-color: #f5f5f5;
  overflow: hidden; /* 隐藏超出屏幕的内容 */
}

.image-anomaly {
  padding: 15px;
}

/* 父容器：控制整体横向布局 */
/* 关键修复：强制 Flex 容器和子项样式，覆盖 Element UI 默认样式 */
.deepseek-chat-container {
  height: 100vh;
  background-color: #f5f5f5;
  overflow: hidden;
  padding: 0px 0; /* 上下留空，左右不留空避免挤压 */
}

/* 父容器：整体横向布局（替换原 .dialog-container 样式） */
.dialog-container {
  display: flex !important;
  justify-content: center !important; /* 从左侧开始排列，不再居中 */
  align-items: center !important;
  gap: 30px !important; /* 缩小元素间间距（原50px，可根据需求调） */
  width: 100% !important;
  box-sizing: border-box !important;
  margin-bottom: 15px;
//padding: 0 10px !important; /* 左侧内边距减小，让对话框更靠左 */
}

/* 左侧输入对话框：左移+缩窄（替换原 .left-dialog 样式） */
.left-dialog {
  flex: 0 0 850px !important; /* 宽度从450px缩到420px，减少右侧占用 */
  position: relative !important; /* 开启相对定位，用于左移 */
  left: 20px !important; /* 主动往左偏移20px（数值可按需调整，越大越靠左） */
  float: none !important;
  margin: 0 !important;
  /* 新增：让对话框靠父容器顶部对齐，实现“挪上去” */
  align-self: flex-start !important;
  /* 可选：加一点顶部margin，避免太贴屏幕顶部 */
  margin-top: -30px !important;
}

/* 右侧结果对话框：保持宽度，避免被挤压（替换原 .right-dialog 样式） */
.right-dialog {
  flex: 0 0 700px !important; /* 宽度从450px缩到430px，进一步腾空间 */
  position: static !important;
  float: none !important;
  margin: 0 !important;
}

/* 中间进度条：调整位置，避免和左侧对话框重叠 */
.progress-container {
  margin-top: 80px !important;
  margin-left: 10px !important; /* 进度条左移，和左侧对话框错开 */
  width: 140px !important; /* 进度条宽度缩窄，减少占用 */
}

.progress-content {
  background: #fff;
  padding: 25px 15px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  width: 150px !important;
  text-align: center;
}


.full-height {
  height: 100%;
}

/* 侧边栏样式 */
.sidebar {
  background-color: #202123;
  color: white;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.logo-area {
  display: flex;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #444;
}

.logo {
  width: 28px;
  height: 28px;
  margin-right: 10px;
}

.logo-text {
  font-size: 18px;
  font-weight: bold;
}

.side-menu {
  border-right: none;
  flex: 1;
}

.user-info {
  display: flex;
  align-items: center;
  padding: 16px;
  border-top: 1px solid #444;
}

.username {
  margin-left: 10px;
}

/* 主内容区样式 */
.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid #e6e6e6;
  background-color: white;
}

.chat-main {
  padding: 0;
  background-color: #f7f7f8;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.chat-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  max-height: calc(100vh - 120px - 60px);
}

.message-item {
  display: flex;
  margin-bottom: 20px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.user-message {
  flex-direction: row-reverse;
}

.assistant-message {
  flex-direction: row;
}

.message-avatar {
  margin: 0 12px;
}

.message-content {
  max-width: calc(100% - 100px);
}

.user-message .message-content {
  align-items: flex-end;
}

.assistant-message .message-content {
  align-items: flex-start;
}

.message-text {
  padding: 12px 16px;
  border-radius: 8px;
  line-height: 1.5;
  word-break: break-word;
}

.user-message .message-text {
  background-color: #10a37f;
  color: white;
  border-top-right-radius: 0;
}

.assistant-message .message-text {
  background-color: white;
  color: #333;
  border-top-left-radius: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.message-time {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}

.user-message .message-time {
  text-align: right;
}

/* 底部输入区样式 */
.chat-footer {
  margin-bottom: 15px;
  padding: 10px 20px;
  background-color: white;
  border-top: 1px solid #e6e6e6;
}

.input-area {
  position: relative;
}

.input-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  /*margin-top: 8px;*/
}

.send-btn {
  margin-left: 10px;
}

.footer-tips {
  text-align: center;
  font-size: 12px;
  color: #999;
  margin-top: 8px;
}

/* 滚动条样式 */
.chat-content::-webkit-scrollbar {
  width: 6px;
}

.chat-content::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.chat-content::-webkit-scrollbar-track {
  background-color: transparent;
}

.input-area {
  display: flex; /* 使用 flexbox 布局 */
  align-items: center; /* 垂直居中对齐 */
  gap: 10px; /* 输入框和按钮之间的间隔 */
}

.input-actions {
  display: flex; /* 确保按钮在同一行 */
  align-items: center; /* 垂直居中 */
}

.send-btn {
  margin-left: 10px; /* 按钮之间的间隔 */
}

</style>
